<template>
    <div :class="inline && 'flex w-full items-center justify-between'">
      <div
        @click="handleClick"
        :class="cn('flex items-center justify-between',supportFold && 'cursor-pointer' )">
        <div class='flex h-6 items-center'>
          <div :class="cn(isSubTitle ? 'system-xs-medium-uppercase text-text-tertiary' : 'system-sm-semibold-uppercase text-text-secondary')">{{title}}</div>
            <Tooltip
              v-if="tooltip"
              :content="tooltip"
            />
        </div>
        <div class='flex'>
          <slot name="operations"></slot>
          <RiArrowDownSLine v-if="supportFold" class='h-4 w-4 cursor-pointer text-text-tertiary transition-transform' 
          :style="{transform: fold ? 'rotate(-90deg)' : 'rotate(0deg)'}" />
        </div>
      </div>
      <div v-if="slots.children && (!supportFold || (supportFold && !fold))" :class="!inline && 'mt-1'">
        <slot name="children"></slot>
      </div>
    </div>
</template>
<script setup lang="ts" name="Field">
import {ref,useSlots} from 'vue';
import {
  RiArrowDownSLine,
} from '@remixicon/vue'
import cn from '@/utils/classnames'
import { Tooltip } from 'ant-design-vue'
const slots = useSlots();
type Props = {
  title: string
  tooltip?: string
  isSubTitle?: boolean
  supportFold?: boolean
  inline?: boolean
}

const props = defineProps<Props>();

const fold = ref(false);

function handleClick() {
 if(props.supportFold) {
  fold.value = !fold.value
 }
}
</script>